import { useMemo } from 'react'
import { isBoolean, isNull } from '@multi-kit/inspect'
import './index.scss'

interface Props {
  value: boolean | null
}

export default function TestLight(props: Props) {
  const { value } = props

  const style = useMemo(() => {
    if (isNull(value)) {
      return 'default'
    }

    if (isBoolean(value) && value) {
      return 'normal'
    } else {
      return 'error'
    }
  }, [props])
  return <div className={`signal-light ${style}`}></div>
}
